import React from 'react';
import {
  Row,
  Col,
  Modal,
  Button,
} from 'antd';

import styles from './index.module.less';

export default class QuickEntryModal extends React.Component {
  onCancel = () => {
    const { handleQuickEntryModalVisible } = this.props;

    handleQuickEntryModalVisible(false);
  };

  render() {
    const { quickEntryModalVisible } = this.props;

    return (
      <Modal
        width={800}
        title='自定义快捷入口'
        visible={quickEntryModalVisible}
        onCancel={this.onCancel}
        footer={null}
      >
        <Row className={styles.rowBox}>
          <Col>
            温馨提示：最多可添加6个快捷功能
          </Col>
        </Row>
        <Row className={styles.rowBox}>
          <Col className={styles.toolsItemBox} span={4}>
            <div className={styles.item}>
              <i className={`iconfont icon-fabushangpin ${styles.icon} ${styles.textLightRed}`}></i>
              <div className={styles.text}>
                发布商品
              </div>
              <i className={`iconfont icon-fangkeshu ${styles.minusBtn}`}></i>
            </div>
          </Col>
          <Col className={styles.toolsItemBox} span={4}>
            <div className={styles.item}>
              <i className={`iconfont icon-dingdanguanli ${styles.icon} ${styles.textLightYellow}`}></i>
              <div className={styles.text}>
                订单管理
              </div>
              <i className={`iconfont icon-fangkeshu ${styles.minusBtn}`}></i>
            </div>
          </Col>
          <Col className={styles.toolsItemBox} span={4}>
            <div className={styles.item}>
              <i className={`iconfont icon-dianpuguanli ${styles.icon} ${styles.textLightOrange}`}></i>
              <div className={styles.text}>
                店铺管理
              </div>
              <i className={`iconfont icon-fangkeshu ${styles.minusBtn}`}></i>
            </div>
          </Col>
          <Col className={styles.toolsItemBox} span={4}>
            <div className={styles.item}>
              <i className={`iconfont icon-youhuiquanguanli ${styles.icon} ${styles.textLightGreen}`}></i>
              <div className={styles.text}>
                优惠券管理
              </div>
              <i className={`iconfont icon-fangkeshu ${styles.minusBtn}`}></i>
            </div>
          </Col>
          <Col className={styles.toolsItemBox} span={4}>
            <div className={styles.item}>
              <i className={`iconfont icon-zhanghaoguanli ${styles.icon} ${styles.textLightBlue}`}></i>
              <div className={styles.text}>
                账号管理
              </div>
              <i className={`iconfont icon-fangkeshu ${styles.minusBtn}`}></i>
            </div>
          </Col>
          <Col className={styles.toolsItemBox} span={4}>
            <div className={styles.item}>
              <i className={`iconfont icon-jiaoyiziliaoguanli ${styles.icon} ${styles.textLightYellow}`}></i>
              <div className={styles.text}>
                交易资料管理
              </div>
              <i className={`iconfont icon-fangkeshu ${styles.minusBtn}`}></i>
            </div>
          </Col>
        </Row>
        <Row className={styles.rowBox}>
          <Col>
            选择您要添加的快捷入口
          </Col>
        </Row>
        <Row className={styles.rowBox}>
          <Col className={styles.toolsItemBox} span={4}>
            <div className={styles.item}>
              <i className={`iconfont icon-fabushangpin ${styles.icon} ${styles.textLightRed}`}></i>
              <div className={styles.text}>
                发布商品
              </div>
              <i className={`iconfont icon-fangkeshu ${styles.addBtn}`}></i>
            </div>
          </Col>
        </Row>
        <Row>
          <Col>
            <div style={{ textAlign: 'center', marginTop: 20 }}>
              <Button type='primary' style={{ marginRight: 20, width: 100 }}>确认</Button>
              <Button style={{ width: 100 }}>取消</Button>
            </div>
          </Col>
        </Row>
      </Modal>
    );
  }
}
